<template>
  <!-- 标签页的内容 -->
  <div class="scroll-wrapper" ref="alistBox" @scroll="rememberPos">
    <!-- 新闻列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多新闻了..."
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id.toString()"
          :to="`/article/${item.art_id.toString()}`"
        >
          <!-- 新闻item模板 -->
          <div class="article_item">
            <h3 class="van-ellipsis">
              {{ item.title }}
            </h3>
            <div class="img_box" v-if="item.cover.images.length">
              <!-- 新闻封面
                     1. 3张封面图
                     2. 1张封面图
                     -->
              <van-image
                v-for="(img, i) in item.cover.images"
                lazy-load
                :key="i"
                :class="item.cover.type === 1 ? 'w100' : 'w33'"
                fit="cover"
                :src="img"
              >
                <!-- 图片加载前=》loading -->
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <!-- 图片加载失败=》显示 -->
                <template v-slot:error>加载失败</template>
              </van-image>
            </div>
            <div class="info_box">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relTime }}</span>
              <!-- 控制弹出层显示 -->
              <span
                v-if="$store.state.user.token"
                @click.stop="openMoreAction(item.art_id.toString())"
                class="close"
                ><van-icon name="cross"></van-icon
              ></span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 更多操作弹出层 -->
    <MoreAction
      v-model="showAction"
      @on-delArt="removeArticle"
      :articleId="articleId"
    />
  </div>
</template>

<script>
import { getArticlesById } from '../../api/article'
// 导入更多操作组件
import MoreAction from './components/moreAction'
export default {
  components: {
    MoreAction
  },
  data () {
    return {
      // 列表数据（新闻列表）
      list: [],
      // 列表加载状态
      loading: false,
      // 列表是否加载完成的状态
      finished: false,
      // 下拉刷新状态
      refreshing: false,
      // 列表分页时间戳
      timestamp: +new Date(),
      // 存储滚动位置
      scrollTop: 0,
      // 控制更多操作是否显示
      showAction: false,
      // 当前点击的文章ID
      articleId: ''
    }
  },
  // 子组件接收频道ID数据=> 获取对应频道数据渲染列表
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  created () {
    console.log('组件实例：', this)
  },
  methods: {
    // 提供给子组件调用的自定义事件的回调函数
    removeArticle () {
      console.log('执行删除：', this.articleId)
      // 要删除的文章索引
      const delIndex = this.list.findIndex((item) => this.articleId === item.art_id.toString())
      // 删除指定索引的文章
      this.list.splice(delIndex, 1)
    },
    // 打开文章更多操作弹出层
    openMoreAction (id) {
      // 存储文章ID
      this.articleId = id
      // 打开更多操作弹出层
      this.showAction = true
    },
    // 记录列表滚动位置
    rememberPos (e) {
      // console.log(e.target.scrollTop)
      this.scrollTop = e.target.scrollTop
    },
    // 执行滚动的方法=>滚动到指定位置
    scrollToPos () {
      console.log('执行滚动：', this.scrollTop)
      /**
       * js代码执行：先执行同步代码，最后执行异步代码（单线程）
       * vue数据驱动视图=》数据变化，引起界面刷新=》渲染是异步？=》
       * 修改数据可能很多=》渲染的话就放一个异步队列中=》等到所有
       * 同步代码执行完=》最后执行异步渲染
       * 问题：一些情况下，先执行滚动，最后执行异步渲染，使列表记忆功能失效
       * $nextTick 会在异步渲染执行完后=》执行回调
       */
      this.$nextTick(() => {
        // 同步代码
        this.$refs.alistBox.scrollTop = this.scrollTop
      })
    },
    // 加载列表分页数据的事件
    /**
     * 执行
     * 1. 列表默认加载会执行
     * 2. 每次用户滚动到底部都会执行加载下一页数据
     */
    async onLoad () {
      // 执行睡眠函数=> 阻断程序执行
      // await this.$sleep()
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      // 清空之前列表加载数据并关闭刷新状态=> 从头再来
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      // mock数据 =》替换成ajax请求
      // for (let i = 0; i < 10; i++) {
      //   this.list.push(this.list.length + 1)
      // }
      const { data } = await getArticlesById(this.channelId, this.timestamp)
      console.log(data)
      // 追加下一页数据
      this.list.push(...data.results)
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (!data.pre_timestamp) {
        // data.pre_timestamp不存在说明后台没数据了=》修改列表状态为加载完成
        this.finished = true
      } else {
        // 后台还有数据
        this.timestamp = data.pre_timestamp
      }
      // }, 1000)
    },
    // 下拉刷新的回调函数
    onRefresh () {
      console.log('开始刷新：', this.refreshing)
      // 重置列表状态
      /**
       * 1. 重置列表加载状态=》不管有没有加载完成=》都设置成未完成
       * 2. 开启列表加载状态
       * 3. 执行列表加载数据的方法=》清空之前列表加载数据并关闭刷新状态
       */
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      // 列表数据要重新加载=》修改时间戳为当前时间!!!!!!!!
      this.timestamp = +new Date()
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
// 新闻item样式
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
